/**
 * ui 组件工厂，所有需要用到的组件可在此注册
 * vant3 组件库组件注册
 * 自定义组件注册
 */
import 'vant/lib/index.css';
import '@/assets/styles/theme/var.scss';
import directives from '@/directives';

import {
    Image as vanImage,
    Icon as vanIcon,
    Popup as vanPopup,
    Collapse as VanCollapse,
    CollapseItem as vanCollapseItem,
    Empty as VanEmpty,
    Sticky as VanSticky,
    Button as VanButton,
    Notify,
    Toast,
    Dialog as VanDialog,
    NavBar as VanNavBar,
    Field as VanField,
    ActionSheet as VanActionSheet,
    List as VanList,
    RadioGroup as VanRadioGroup,
    Radio as VanRadio,
    Form as VanForm,
    PasswordInput as VanPasswordInput,
    NumberKeyboard as VanNumberKeyboard,
    ImagePreview as VanImagePreview,
    Overlay as VanOverlay,
    Swipe as VanSwipe,
    SwipeItem as VanSwipeItem,
    Uploader as VanUploader,
    ActionBar as VanActionBar,
    ActionBarButton as VanActionBarButton,
    Search as VanSearch,
    CellGroup as VanCellGroup,
    Rate as VanRate,
    Tabs as vanTabs,
    Tab as vanTab
} from 'vant';

const components = [
    vanTabs,
    vanTab,
    vanImage,
    vanIcon,
    vanPopup,
    VanCollapse,
    vanCollapseItem,
    VanEmpty,
    VanSticky,
    VanButton,
    VanField,
    VanActionSheet,
    VanNavBar,
    VanList,
    VanRadioGroup,
    VanForm,
    VanRadio,
    VanPasswordInput,
    VanNumberKeyboard,
    VanDialog,
    VanImagePreview,
    VanOverlay,
    VanSwipe,
    VanSwipeItem,
    VanUploader,
    VanActionBar,
    VanActionBarButton,
    VanSearch,
    VanCellGroup,
    VanRate
]

window.$tips = {
    Notify,
    Toast,
    Dialog: VanDialog,
}

const plugins = []

/**
 * 自主开发的组件
 */
const personalComponents = [];

/**
 * 自主开发的插件
 */
const personalPlugins = [];

export default {
    /**
     * 注册按需引入使用到的组件
     * @param {Object} app vue 的 createApp 实例
     */
    register(app) {
        // 设置语言
        // use(zhcn);

        // 组件库注册
        components.forEach(component => {
            app.use(component)
        });
        plugins.forEach(plugin => {
            app.use(plugin);
        });

        // 自定义注册
        personalComponents.forEach(component => {
            app.component(component.name, component)
        });
        personalPlugins.forEach(plugin => {
            app.use(plugin)
        });

        // 注册 directive
        for (let key in directives) {
            app.directive(key, directives[key])
        }
        return app;
    }
}
